<template>
    <el-form ref="form" :model="curData" label-width="100px" :inline="true" :rules="rules" status-icon>
        <el-form-item label="用户名:" prop="userName">
            <el-input v-model.trim="curData.userName" placeholder="请输入用户名" size="small"  :disabled="curData.isSys == 1" clearable></el-input>
<!--            <el-input v-model.trim="curData.userName" placeholder="请输入用户名" size="small" v-else clearable></el-input>-->
        </el-form-item>
        <el-form-item label="昵称:" prop="nickName">
            <el-input v-model.trim="curData.nickName" placeholder="请输入昵称" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门:" prop="deptId">
            <el-select-tree
                clearable
                default-expand-all
                checkStrictly
                :popover-min-width="200"
                :data="deptTrees"
                styles="height:32px!important"
                v-model="curData.deptId"
            ></el-select-tree>
        </el-form-item>
        <el-form-item label="用户类型:" prop="type">
            <el-select v-model="curData.type" placeholder="请选择用户类型" size="small" clearable  :disabled="curData.id != null">
                <el-option v-for="(item,index) in userTypes" :label="item.label" :value="+item.value"
                           :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="生日:" prop="birthday">
            <el-date-picker
                v-model="curData.birthday"
                type="date"
                placeholder="选择日期"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable>
            </el-date-picker>
        </el-form-item>
        <el-form-item label="密码有效期:" prop="passwordValid">
            <el-date-picker
                v-model="curData.passwordValid"
                type="date"
                placeholder="选择日期"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable>
            </el-date-picker>
        </el-form-item>
        <el-form-item label="性别:" prop="sex"  class = "formInline">
            <el-radio-group v-model="curData.sex">
                <el-radio v-for="(item,index) in userSexs" :label="+item.value" :key="index">{{item.label}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="状态:" prop="enabled" size="small"  class = "formInline">
            <el-switch v-model="curData.enabled" active-color="#13ce66" :active-value="+enableds[0].value"
                       :inactive-value.number="+enableds[1].value"></el-switch>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
            <el-input v-model.trim="curData.phone" placeholder="请输入手机号" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="eamil">
            <el-input v-model.trim="curData.eamil" placeholder="请输入邮箱" size="small" clearable></el-input>
        </el-form-item>

        <el-form-item class="formBtn">
            <el-button type="info" @click="handleCancel" size="medium">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="medium">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import edtiMixin from '@/mixins/edit.mixin'
    import rules from './rules';
    import {mapState, mapActions} from 'vuex'
    export default {
        mixins: [edtiMixin],
        data() {
            return {
                rules: rules(this),
                addApi: this.$api.system.user.add,
                editApi: this.$api.system.user.edit
            };
        },
        computed: {
            ...mapState('basic', ['deptTrees']),
            ...mapState('dic', ['userSexs','userTypes','enableds'])
        },
        methods: {
            ...mapActions('basic', ['doDeptTreeOfBasic']),
            ...mapActions('dic',['doUserTypesOfBasic','doUserSexsOfBasic','doEnabledOfBasic']),
            resetEditParams(data) {
            },
            initDatas() {
                // 部门树
                this.doDeptTreeOfBasic();
                // 数据字典用户类型
                this.doUserTypesOfBasic().then(result => {
                    if(!this.curData.id) {
                        this.curData.type = this.userTypes && parseInt(this.userTypes[0].value) || 0;
                    }
                });
                // 数据字典用户性别
                this.doUserSexsOfBasic().then(result => {
                    if(!this.curData.id) {
                        this.curData.sex = this.userSexs && parseInt(this.userSexs[0].value) || 0;
                    }
                });
                // 数据字典启停状态
                this.doEnabledOfBasic();
            },
        },
        mounted() {
            this.initDatas();
        }
    };
</script>
<style scoped lang="less">
    @import "../../../assets/css/common.less";

    /deep/ .formTreeSelect1 {
        width: 1200px!important;
        background: red;
    }
    /deep/ .el-select-tree__popover {
        width: 1200px!important;
        background: red;
    }
</style>
